<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <div class="countFsColor addBtnA" @click="showDiog">添加</div>
          <el-table
            :data="tableData"
            style="width: 100%"
        
            class="card-table"
            :border="false"
            stripe
            :default-sort="{prop: 'five'}"
          >
            <template>
              <slot />
            </template>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--文件添加-->
    <myModal :obj="obj" :disabled="disabled" @close="close" @save="save">
      <div class="mpdalBody">
        <el-form ref="form" :model="sizeForm" label-width="85px" class="formDiv">
          <el-form-item label="保险名称:" :required="true">
            <el-input
              v-model="sizeForm.name"
              type="text"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="保险公司:">
            <el-input
              v-model="sizeForm.company"
              type="text"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="保费:">
            <el-input
              v-model="sizeForm.price"
              type="text"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="起保日期:" :required="true">
            <el-date-picker v-model="sizeForm.startDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="截止日期:" :required="true">
            <el-date-picker v-model="sizeForm.endDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="附件:" :required="false">
            <!-- <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                    <br>
                    <i class="el-icon-folder fileWD"></i>
                    <div class="el-upload__text divSE">
                        <em>将文件拖到此处，或点击上传</em>
                        <span class="txtUpo">支持上传：PDF、视频(mp4)、图片(jpg / png / jpeg)</span>
                    </div>
                    </el-upload> -->
            <Upload v-if="obj.show" v-model="sizeForm.file" maxcount="3" :cover="sizeForm.file" @getImage="changePoster" />
          </el-form-item>
          <!---->
          <!---->
        </el-form>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import Upload from '@/components/Upload/DragImage'
import { saveBX, getHouseBX } from '@/api/houseFile'
import { dateFormat } from '@/utils/common'
export default {
  components: { myModal, Upload },
  props: {
    tableData: {
      type: Array
    },
    houseid: {
      type: String
    }
  },
  data() {
    return {
      disabled: true,
      dateFormat,
      postForm: {
        houseId: '',
        userId: ''
      },
      sizeForm: {
        userId: '',
        houseId: ''
      },
      obj: {
        show: false,
        title: '添加保险',
        width: '647px'
      },
      textarea: '',
      props: {
        tableConfig: {
          type: Object,
          required: true,
          default: () => {}
        },
        tableData: {
          type: Array,
          required: true,
          default: () => []
        }
      }
    }
  },
  watch: {
    sizeForm: {
      handler(val) {
        if (this.sizeForm.name && this.sizeForm.startDate && this.sizeForm.endDate) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  },
  methods: {
    handleClick() {

    },
    showDiog() {
      this.sizeForm = {}
      this.obj.show = true
    },
    save() {
      this.sizeForm.houseId = this.houseid
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          saveBX(this.sizeForm).then((response) => {
            if (response.code === 200) {
              this.$notify.success({ message: '保存成功' })

              this.obj.show = false
              this.$emit('getTable')
              this.sizeForm = {}
            }
            this.loading = false
          })
        }
      })
    },
    close() {
      this.sizeForm = {}
      this.obj.show = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    changePoster(val) {
      console.log('文件路径：val' + val)
      this.sizeForm.file = val.toString()
    },
    queryFileList() {
      getHouseBX(this.houseid).then(response => {
        response.data.forEach(function(item) {
          item.arr = []
          if (item.file != null) {
            item.file = item.file.split(',')
            item.file.forEach(function(list) {
              const index = list.lastIndexOf('/')
              const filename = list.substr(index + 1)
              const catalog = list.substr(0, index + 1)
              item.arr.push(filename)
            })
          }
        })
        this.arrTable = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf, ::v-deep .el-table td,::v-deep .el-table__body{border: 0;}
::v-deep .el-table::before ,::v-deep .el-table__fixed-right::before{display: none;}
::v-deep  th{background: #cacaca;font-weight: bold;color: #575757;}
::v-deep   .el-table--striped .el-table__body tr.el-table__row--striped td{background: #f7f7f7;}
.addBtnA{text-align: right;margin-bottom: 10px;}
</style>
